<template>
    <div>
        <div id="editor" class="editor" v-highlight></div>
    </div>
</template>

<script>
import wangeditor from 'wangeditor'
export default {
    data(){
        return{
            editor: null,
            editorData:"",
            once:1
        }
    },
    props:['content'],
    methods: {
        /**
         * 通过代码获取编辑器内容
         */
        // getEditorData() {
        //     let data = this.editor.txt.html()
        //     alert(data)
        // },
        /**
         * 设置初始化内容
         */
        getCon(){
            console.log(111)
            if(this.$route.path=="/blog/update"){
                console.log(this.content)
                this.editorData=this.content//this.content
                // toString(this.content)
                this.editor.txt.html(this.content)
            }
        },
        seteditor() {   
            console.log(123)
            const editor = new wangeditor('#editor')
            this.editor=editor;
            this.editor.config.zIndex = 500
            this.editor.config.pasteFilterStyle = false    // 关闭粘贴内容中的样式
            // this.editor.config.pasteIgnoreImg = true   // 忽略粘贴内容中的图片
            this.editor.config.uploadImgShowBase64 = false; // base 64 存储图片
            // this.editor.config.uploadImgServer = "http://localhost:3003/api/media/artImg"; // 填写配置服务器端地址,全拼
            this.editor.config.uploadImgHeaders = {}; // 自定义 header
            this.editor.config.uploadFileName = "file"; // 后端接受上传文件的参数名
            this.editor.config.uploadImgParams = {
                file_type: "img"
            };
            this.editor.config.uploadImgMaxSize = 5 * 1024 * 1024; // 将图片大小限制为 5M
            this.editor.config.uploadImgMaxLength = 6; // 限制一次最多上传 6 张图片
            this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间

            // 配置菜单
            this.editor.config.menus = [
                "head", // 标题
                "bold", // 粗体
                "fontSize", // 字号
                "fontName", // 字体
                "italic", // 斜体
                "underline", // 下划线
                "strikeThrough", // 删除线
                "foreColor", // 文字颜色
                "backColor", // 背景颜色
                "link", // 插入链接
                "list", // 列表
                "justify", // 对齐方式
                "quote", // 引用
                "emoticon", // 表情
                "image", // 插入图片
                "table", // 表格
                // "video", // 插入视频
                "code", // 插入代码
                "undo", // 撤销
                "redo", // 重复
                "fullscreen" // 全屏
            ];

            this.editor.config.uploadImgHooks = {
                fail: (xhr, editor, result) => {
                // 插入图片失败回调
                    console.log('图片上传并返回结果，但图片插入错误')
                },
                success: (xhr, editor, result) => {
                     console.log('图片上传并返回结果,图片插入成功')
                // 图片上传成功回调
                },
                timeout: (xhr, editor) => {
                // 网络超时的回调
                    console.log('图片上传超时')
                },
                error: (xhr, editor) => {
                // 图片上传错误的回调
                    console.log('图片上传出错')
                },
                customInsert: (insertImg, result, editor) => {
                    console.log(' 图片上传并返回结果')
                // 图片上传成功，插入图片的回调
                //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
                // console.log(result.data[0].url)
                //insertImg()为插入图片的函数
                //循环插入图片
                // for (let i = 0; i < 1; i++) {
                if (result.code == 200) {
                    let url = result.data.image_url;
                    JSON.stringify(url);
                    insertImg(url);
                } else {
                    this.$Message.error(result.msg);
                }
                // }
                }
            };
            this.editor.config.onchange = html => {
                this.editorData = html// 绑定当前逐渐地值
                this.$emit("getcontent", this.editorData);// 将内容同步到父组件中

            };
            // 创建富文本编辑器
            this.editor.create();
        },


    },

    mounted:function () {
        
        this.seteditor()
        // console.log(this.content)
        this.getCon()
    },
    watch:{
        content:function(newVal){
            if(this.once==1){
                // console.log(newVal)
                this.content=newVal
                // this.editor.txt.html(this.content)
                this.getCon()  
                this.once++              
            }

        }
    },
    beforeDestroy() {
        // 调用销毁 API 对当前编辑器实例进行销毁
        this.editor.destroy()
        this.editor = null
    },
}
</script>